<template>
    <div :style="{'width': width}" class="fm-editor-container">
        <textarea :id="id" :value="content"/>
    </div>
</template>

<script>
import { generateUUID, loadJs, loadCss } from '@/common/utils/index.js'
// import tinymce from '../../lib/tinymce/tinymce.js'
const tinymce = window.tinymce
export default {
    props: {
        value: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: '200px'
        },
        width: {
            type: String
        }
    },
    data() {
        return {
            id: 'editor-' + generateUUID(),
            content: this.value
        }
    },
    watch: {
        value(val) {
            this.content = val
        }
    },
    mounted() {
        const _this = this

        tinymce.init({
            selector: '#' + _this.id,
            language_url: 'http://tools.xiaoyaoji.cn/form/lib/tinymce/zh_CN.js',
            language: 'zh_CN',
            // skin_url: 'lib/tinymce/skins/lightgray',
            height: this.height,
            menubar: false,
            // images_upload_handler: (blobInfo, success, failure) => {

            // },
            init_instance_callback: (editor) => {
                console.log('Editor: ' + editor.id + ' is now initialized.')
                editor.on('input change undo redo', () => {
                    _this.$emit('input', editor.getContent())
                })
            },
            setup: (editor) => {
                editor.on(
                    'input change undo redo', () => {
                        _this.$emit('input', editor.getContent())
                    }
                )
            },
            plugins: [
                'advlist autolink lists link image charmap print preview anchor textcolor colorpicker',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime table media  contextmenu paste code help wordcount'
            ],
            toolbar: 'insert table | undo redo |  formatselect | bold italic strikethrough forecolor backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | code '

        })
    },
    beforeDestroy: function() {
        tinymce.get(this.id).destroy()
    },
    methods: {
        setHtml(val) {
            this.content = val
            tinymce.activeEditor.setContent(val)
            this.$emit('input', val)
        }
    }
}
</script>

<style lang="scss">
.fm-editor-container{
  .mce-branding{
    display: none;
  }

  .mce-tinymce{
    box-shadow: 0 0 0 0;
  }
}
</style>
